<template>
	<i-drawers bodyHeight="900rpx" v-model="showModal" :diySlot="true">
		<view class="select_bdy">
			<i-selectBody :check="{id: formData.serviceType}" :list="mer_service_type" @click="select"></i-selectBody>
		</view>
	</i-drawers>
	<i-drawer v-model="delectShow" title="确认删除项目吗？" confirm_title="删除" @confirm="confirm"></i-drawer>
	<view class="goAddProject">
		<view class="form">
			<i-formItem :contStyle="{color: selectTitle ? '#16161F': '#A0A0AD'}" @click="showModal = true" title="项目分类"
				:require="true" :content="selectTitle ? selectTitle : '请选择项目分类'" :right='true'>
			</i-formItem>
			<view class="no_item" v-if="!formData.serviceType && !isOnceCheck">请填写此项</view>
			<i-formItem title="项目名称" :require="true">
				<input placeholder-class="placeholder-class" v-model="formData.serviceName" type="text" placeholder="请输入项目名称（2-20个字）">
			</i-formItem>
			<view class="no_item" v-if="!formData.serviceName && !isOnceCheck">请填写此项</view>
			<i-formItem title="价格" :require="true">
				<input placeholder-class="placeholder-class" type="decimal" v-model="formData.price" placeholder="请输入价格">
			</i-formItem>
			<view class="no_item" v-if="!formData.price && !isOnceCheck">请填写此项</view>
			<i-formItem title="快捷搜索码">
				<input placeholder-class="placeholder-class" v-model="formData.keyword" type="text" placeholder="请输入快捷搜索码">
			</i-formItem>
			<i-formItem title="排序" border="none">
				<input placeholder-class="placeholder-class" v-model="formData.sortNum" type="number" placeholder="排序值越小，排名越靠前">
			</i-formItem>
		</view>
		<view style="height: 20rpx; width: 100%; background-color: #f3f4f5;">

		</view>
		<view class="form">
			<i-formItem title="是否上架">
				<switch :checked="formData.serviceStatus === 0" @change="chekChange" color="#FB652E"
					style="transform:scale(0.9)" />
			</i-formItem>
			<view style="height: 48rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="add"> 保存
			</i-buttons>
			<view style="height: 32rpx;"></view>
			<i-buttons v-if="id" radius="4" padding="18rpx 0" size="32" @click="delectShow = true">删除</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive,
		onMounted
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, insertStr, checkForm, showTost } from '../../utils/common';
	import { spaceReg, decimalReg } from '../../utils/regs';
	import { serviceInfoCreate, serviceInfoDetail, serviceInfoDelete } from '../../api/business'
	const store = useStore()

	const showModal = ref(false)
	const isOnceCheck = ref(true)
	const delectShow = ref(false)

	const formData = reactive({
		"serviceType": '',
		"id": "",
		"keyword": "",
		"price": null,
		"serviceName": "",
		"serviceStatus": 0,
		"sortNum": 0
	})
	const selectTitle = ref('')
	const id = ref('')

	const mer_service_type = computed(() => {
		return store.dictTypes?.mer_service_type?.map((item : { label : string, value : string }) => {
			return {
				title: item.label,
				id: item.value,
				active: false
			}
		}) || null
	})

	const chekChange = (e : { detail : { value : boolean } }) => {
		if (e.detail.value) {
			formData.serviceStatus = 0
		} else {
			formData.serviceStatus = 1
		}
	}
	const confirm = async () => {
		serviceInfoDelete({ id: id.value })
		showTost('删除成功', () => navTo('', 'navigateBack'))
	}
	const add = async () => {
		isOnceCheck.value = false
		const data = checkForm(formData, ['sortNum', 'serviceStatus', 'keyword', 'id', 'serviceName'], {}, false, false)
		if (data) {
			return
		}
		if (formData.serviceName.length < 2 || formData.serviceName.length > 20 || spaceReg.test(formData.serviceName)) {
			showTost('项目名称在2-20个字,并且不能有空格符')
			return
		}
		if (!decimalReg.test(formData.price) || formData.price <= 0) {
			showTost('请输入正确价格')
			return
		}
		if (spaceReg.test(formData.keyword)) {
			showTost('快捷搜索键不能包含有空格字符')
			return
		}

		await serviceInfoCreate(formData)
		showTost(id.value ? '编辑成功' : '添加成功', () =>
			navTo('', 'navigateBack')
		)
	}


	const select = (e : { id : string, title : string }) => {
		formData.serviceType = e.id
		selectTitle.value = e.title
		showModal.value = false
	}

	const getFormData = async (id : string) => {
		const { data } = await serviceInfoDetail({ id })
		formData.keyword = data.keyword
		formData.id = data.id
		formData.price = data.price
		formData.sortNum = data.sortNum
		formData.serviceName = data.serviceName
		formData.serviceStatus = data.serviceStatus
		formData.serviceType = data.serviceType + ''
		selectTitle.value = data.serviceTypeLabel
	}
	onMounted(() => {
		!mer_service_type.value && store.setDictList('mer_service_type')
	})
	onLoad((option) => {
		if (option.id) {
			id.value = option.id
			getFormData(option.id)
		}
	})

	onReady(() => {
		uni.setNavigationBarTitle({
			title: id.value ? "编辑项目" : '添加项目'
		})
	})
</script>

<style lang="scss" scoped>
	.goAddProject {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.form {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexC;

			input {
				width: 72%;
			}
		}
	}

	.no_item {
		width: 100%;
		border-top: 1rpx solid #FF453A;
		color: #FF453A;
		font-size: 26rpx;
	}

	.select_bdy {
		height: 800rpx;
		overflow-y: auto;
	}
</style>